<script lang="ts" setup>
import type { VbenFormProps } from '@vben/common-ui';

import type { VxeGridProps } from '#/adapter/vxe-table';
import type { DefApplicationModel } from '#/api';

import { ref } from 'vue';

import { Page } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { findMyApplication } from '#/api';
import { TableAction } from '#/components/table-action';
import { useMessage } from '#/hooks/web/useMessage';

import DetailForm from './detail.vue';
import { gridSchemas, searchFormSchemas } from './schemas/index';

const formOptions: VbenFormProps = {
  ...searchFormSchemas,
  collapsed: true,
};

const gridOptions: VxeGridProps<DefApplicationModel.DefApplicationResultVO> = {
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  ...gridSchemas,
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async (_, formValues) => {
        const result = await findMyApplication({ ...formValues });
        return {
          records: result,
          total: result?.length,
        };
      },
    },
  },
};
const detailFormRef = ref();
const { createMessage } = useMessage();

const [Grid] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

const handleView = (record: any) => {
  detailFormRef.value.setData({
    record,
  });
  detailFormRef.value.open();
};

const handleRenewal = (_: any, e: Event) => {
  e?.stopPropagation();
  createMessage.success('请联系管理员，申请续期');
};
</script>

<template>
  <Page auto-content-height>
    <Grid table-title="应用列表">
      <template #ACTION="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看',
              type: 'link',
              size: 'small',
              onClick: handleView.bind(null, row),
            },
            {
              label: '续期',
              type: 'link',
              size: 'small',
              onClick: handleRenewal.bind(null, row),
            },
          ]"
        />
      </template>
    </Grid>
    <DetailForm ref="detailFormRef" />
  </Page>
</template>
